<template>
  <el-container>
    <el-header>
      <headers :activeIndex="activeIndex"></headers>
    </el-header>
    <el-main>
      <el-row style="margin-bottom:1rem;">
        <el-button size="mini" @click="addroot">新增根节点</el-button>
      </el-row>
      <el-tree :data="classification_data" :props="defaultProps" node-key="id" default-expand-all
        :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span style="margin-left:2rem;">
            <el-button type="text" size="mini" @click="() => append(data)">
              新增
            </el-button>
            <el-button type="text" size="mini" @click="() => edit(data)">
              编辑
            </el-button>
            <!-- <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button> -->
            <el-popconfirm confirmButtonText='确定删除' cancelButtonText='不用了' @onConfirm="remove(node, data)"
              icon="el-icon-info" iconColor="red" title="确定要删除该节点以及其所有子节点吗？">
              <el-button slot="reference" type="text" size="mini">删除</el-button>
            </el-popconfirm>
          </span>
        </span>
      </el-tree>
    </el-main>
    <el-dialog title="修改" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="classification_edit"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
  import headers from '@/components/headers.vue'
  import axios from 'axios'

  export default {
    data: function () {
      return {
        activeIndex: '3',
        classification_data: [],
        classification_edit: '', //弹出的编辑框
        current_classification: {}, //当前的节点数据对象
        dialogVisible: false,
        defaultProps: {
          children: 'children',
          label: 'classification'
        }
      }
    },
    components: {
      headers
    },
    methods: {
      append(data) {
        console.log(data)

        axios.post(this.$store.state.base_url + "/classification/" + data.id).then(datas => {
          let node = datas.data
          node.children = [] //防止报错
          data.children.push(node)
        })
      },

      edit(data) {

        this.dialogVisible = true
        this.current_classification = data
        this.classification_edit = data.classification

      },
      submit() {
        this.current_classification.classification = this.classification_edit
        console.log(this.current_classification)
        axios.put(this.$store.state.base_url + "/classification/", this.current_classification).then(() => {
          this.dialogVisible = false
        })
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        let id=data.id
        let url=this.$store.state.base_url + '/classification/' + id
        console.log(url)
        axios.delete(url).then(res => {
          console.log(id)
          if(res.data.code=="SUCCESS"){
            children.splice(index, 1);
            this.$message({
              message: '分类删除成功',
              type: 'success'
            });
          }else{
            this.$message.error(res.data.message)
          }
          
        })

      },
      addroot() {
        axios.post(this.$store.state.base_url + "/classification/0").then(datas => {
          let node = datas.data
          node.children = [] //防止报错
          this.classification_data.push(node)
        })
      },

    },
    mounted() {
      axios.get(this.$store.state.base_url + "/classification/findall").then(data => {
        this.classification_data = data.data.data
      })
    }

  }
</script>


<style scoped>

</style>